<template>
  <div class="case-table-container">
    <el-table
      :data="caseData"
      style="width: 100%"
      border
      stripe
      height="calc(100vh - 240px)"
      :header-cell-style="{
        background: '#9bbbf3',
        color: '#fff',
        fontWeight: 'bold',
        fontSize: '13px'
      }"
      :row-style="{ height: '50px' }"
    >
      <el-table-column 
        prop="docketNumber" 
        label="卷宗号" 
        width="160"
        fixed
        align="center"
      />
      <el-table-column 
        prop="year" 
        label="年份" 
        width="100"
        align="center"
      />
      <el-table-column 
        prop="caseReason" 
        label="案由" 
        width="150" 
        align="center"
      />
      <el-table-column 
        prop="crimeType" 
        label="犯罪类型" 
        width="140" 
        align="center"
      >
        <template #default="{ row }">
          <el-tag 
            :type="row.crimeType === '帮助信息网络犯罪活动' ? 'danger' : 'warning'"
            effect="dark"
            size="small" 
          >
            {{ row.crimeType }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column 
        prop="amountInvolved" 
        label="涉案金额(元)" 
        width="140" 
        align="right"
      >
        <template #default="{ row }">
          <span class="amount-text">
            {{ formatCurrency(row.amountInvolved) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column 
        prop="sentence" 
        label="判决结果" 
        width="240"
        align="center"
      />
      <el-table-column 
        prop="defendantInfo" 
        label="行为人信息" 
        width="140" 
        align="center"
      >
        <template #default="{ row }">
          <div class="info-item">
            <el-icon size="12"><user /></el-icon> 
            <span style="font-size: 12px">{{ row.defendantInfo }}</span> 
          </div>
        </template>
      </el-table-column>
      <el-table-column 
        prop="reviewRequirements" 
        label="审查要求" 
        width="280" 
      >
        <template #default="{ row }">
          <div class="requirement-item">
            <el-icon size="12"><document /></el-icon> 
            <span class="requirement-text" style="font-size: 12px">{{ row.reviewRequirements }}</span> 
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { User, Document } from '@element-plus/icons-vue'
import {
  getCaseManagementList
} from '@/api/flaud/caseManagement'

const page = ref(1)
const total = ref(0)
const pageSize = ref(1)
const tableData = ref([])
const searchInfo = ref({})

onMounted(() => {
  getTableData()
})

const getTableData = async () => {
  const table = await getCaseManagementList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
  if (table.code === 0) {
    tableData.value = table.data.list
    total.value = table.data.total
    page.value = table.data.page
    pageSize.value = table.data.pageSize
  }
  console.log(tableData.value)
}

// 获取 tableData 中最新的一条数据，按 CreatedAt 降序排序
const latestTableData = computed(() => {
  if (tableData.value.length === 0) return {};
  return tableData.value.sort((a, b) => new Date(b.CreatedAt).getTime() - new Date(a.CreatedAt).getTime())[0];
})

interface CaseItem {
  docketNumber: string
  year: string
  caseReason: string
  crimeType: string
  basicFacts: string
  evidenceFacts: string
  judgmentReason: string
  legalBasis: string
  amountInvolved: number
  evidenceTypes: string[]
  sentence: string
  defendantInfo: string
  reviewRequirements: string
}

// 根据最新数据构造表格数据数组
const caseData = computed(() => {
  const latest = latestTableData.value;
  if (!latest) return [];
  return [
    {
      docketNumber: latest.caseNumber,
      year: latest.year,
      caseReason: latest.cause,
      crimeType: '帮助信息网络犯罪活动', // 可根据实际情况从接口数据中取对应字段
      amountInvolved: latest.amountInvolved,
      sentence: latest.judgmentResult,
      defendantInfo: latest.perpetratorTrait,
      reviewRequirements: '可根据实际需求从接口数据中取对应字段填充', // 你需确认实际对应字段
    }
  ] as CaseItem[];
})

const formatCurrency = (value: number) => {
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY',
    minimumFractionDigDigits: 2
  }).format(value).replace('CN¥', '¥')
}
</script>

<style scoped>
.case-table-container {
  width: 100%;
  height: 100%;
  padding: 10px; 
  background: #f0f2f5;
}

.requirement-item {
  margin: 3px 0; 
  display: flex;
  align-items: center;
  line-height: 1.4;
}

.info-item {
  margin: 3px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-icon {
  margin-right: 4px;
  color: #9bbbf3;
}

.amount-text {
  font-weight: bold;
  color: #f56c6c;
}

.requirement-text {
  flex: 1;
}

:deep(.el-table) {
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08); 
}

:deep(.el-table__body-wrapper)::-webkit-scrollbar {
  width: 6px; 
  height: 6px;
}

:deep(.el-table--border) {
  border-radius: 4px;
}
</style>
